My app.js component code is given below I am using the render syntax for components with props in I have checked the syntax for calling component with props using render method, it is exactly the same plus i am following a video tutorial he is also using the same syntax what am i missing? what went wrong?

import React,{useState,useEffect} from 'react';
import { v4 as uuid } from 'uuid';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import  './App.css';
import Header from "./Header";
import AddContact from "./AddContact";
import ContactList from "./ContactList";

function App() {
  const LOCAL_STORAGE_KEY ="contacts";
  const [contacts, setContacts]=useState([]);
  const addContactHandler = (contact)=>{
    console.log(contact);
    setContacts([...contacts,{id: uuid(), ...contact}]);
  };

  const removeContactHandler =(id)=>{
    const newContactList = contacts.filter((contact)=>{
      return contact.id !== id;
    });

    setContacts(newContactList);
  };

  useEffect(()=>{

    const retriveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
    if (retriveContacts)  setContacts(retriveContacts);
  },[]);
  useEffect(()=>{
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  },[contacts]);
  return (
    <div className='ui container'>
      <Router>
        <Header/>
        <Routes>
        
          <Route path="/" render={(props)=> (<ContactList {...props} contacts={contacts} getContactId = {removeContactHandler}/>) } />
          <Route path="/add" render={(props)=>(<AddContact {...props} addContactHandler={addContactHandler}/>)} />
        </Routes>
      </Router>
      
      
      
      {/*<AddContact addContactHandler={addContactHandler}/>
      <ContactList contacts={contacts} getContactId = {removeContactHandler}/> */}
    </div>
    
  );
}

export default App;